<template>
  <div class="messageBox">
    <main>
      <ul class="self_scroll">
        <li v-for="msg in barrageList" :key="msg.msgID">
          <span class="name">{{ $store.state.chatInformation.userList[msg.from].remarks ? $store.state.chatInformation.userList[msg.from].remarks : $store.state.chatInformation.userList[msg.from].user_name }}：</span>
          <span class="msg">{{ msg.msg }}</span>
        </li>
      </ul>
    </main>
    <footer>
      <input
        ref="inputBarrage"
        type="text"
        v-model="selfMsg"
        placeholder="请输入消息内容"
        @keyup.enter="sendBarrage"
      />
    </footer>
  </div>
</template>

<script>
import { sendSock } from '@/utils/socketSend'

export default {
  data () {
    return {
      selfMsg: ''
    }
  },
  computed: {
    barrageList () { // 弹幕列表
      const list = this.$store.state.conferenceRoom.cf_chatContent
      return list.slice(list.length - 5, list.length)
    },
    // 当前会议ID
    cf_id () {
      return this.$store.state.conferenceRoom.cf_id
    }
  },
  methods: {
    sendBarrage () { // 发弹幕
      if (this.selfMsg.trim()) {
        const barrage = {
          msg: this.selfMsg.trim(),
          msgID: +new Date(),
          from: this.$store.state.user.userInfo.user_id
        }
        this.$store.commit('conferenceRoom/set_cf_chatContent', { list: [barrage] })
        sendSock({
          type: '4.2.1',
          body: {
            cf_id: this.cf_id,
            msg: this.selfMsg
          }
        })
        this.selfMsg = ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.messageBox {
  position: absolute;
  bottom: 96px;
  left: 24px;
  // background-color: skyblue;
  width: 300px;
  main {
    ul {
      height: 100%;
      li {
        padding: 8px 12px 8px 8px;
        background: rgba(0, 0, 0, 0.36);
        border-radius: 2px;
        margin-bottom: 4px;
        width: fit-content;
        span {
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          line-height: 17px;
        }
        .name {
          height: 17px;
          color: #9eaac4;
        }
        .msg {
          color: #f1f2f3;
        }
      }
    }
  }
  footer {
    input {
      text-indent: 8px;
      color: #f1f2f3;
      font-size: 12px;
      width: 300px;
      border: none;
      height: 32px;
      background: rgba(0, 0, 0, 0.36);
      border-radius: 2px;
      &::placeholder {
        color: rgba(255, 255, 255, 0.5);
      }
    }
  }
}
</style>
